<template>
  <div class="default-layout">
    <NavBar />
    <Slider />
    <!-- <Tabs /> -->
    <div :class="{ wrapper: true, expand: menuStore.expandFold }">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import { defineComponent } from 'vue'
import NavBar from '@components/layouts/Navbar.vue'
import Slider from '@components/layouts/Slider.vue'
import Tabs from '@components/layouts/Tabs.vue'
import { useMenuStore } from '@/pinia/menu'

const menuStore = useMenuStore()
</script>
<style scoped lang="scss">
.default-layout {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper {
  position: fixed;
  left: 215px;
  top: 70px;
  right: 10px;
  bottom: 6px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  transition: all 0.5s;
  overflow-y: auto;
}

.wrapper.expand {
  left: 78px;
}
</style>
